<template>
	<view class="goods-detail-evaluate m-20  radius-20 bg-white">
		<view class="title p-30">
			<view class="tit">商品评价 <text v-if="props.commentsCount">({{ props.commentsCount }})</text></view>
			<coreshop-view-more v-if="props.commentsCount" @hanldeClickViewMore="hanldeClickViewMore" />
		</view>
		<view class="evaluate-box" v-if="props.commentsList.length > 0">
			<view class="item" v-for="item in props.commentsList" :key="item.id">
				<view class="name-box">
					<view class="avatar">
						<image class="img" :src="item.avatarImage"></image>
						<view class="name">{{ item.nickName }}</view>
					</view>
					<uv-rate :count="5" v-model="item.score" readonly activeColor="#D33123"></uv-rate>
				</view>
				<view class="content">{{ item.contentBody }}</view>
				<view class="time">{{ item.createTime }} </view>
				<view class="addon">{{ item.addon }}</view>
				<view class="sellerContent">
					商家回复：{{item.sellerContent}}
				</view>
			</view>
		</view>
		<view v-else class="p-b-20 p-l-30">
			<view class="no-evaluate">暂无评价</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import type { GoodsPictureListType } from "@/core/models";
	import { handleRouteNavigateTo } from "@/core/utils";

	const props = withDefaults(defineProps<{
		commentsCount : number,
		commentsList : Array<GoodsPictureListType>,
		id : number;
	}>(), {
		commentsCount: 0,
		commentsList: () => [],
		id: 0,
	});

	const hanldeClickViewMore = () => {
		handleRouteNavigateTo(`/pages/goods/comment?id=${props.id}`);
	}
</script>

<style lang="scss" scoped>
	@import './goods-detail-evaluate.scss';
</style>